import 'package:cat_eye/base/base_refresh_state.dart';
import 'package:cat_eye/bean/sq_lite_bean.dart';
import 'package:cat_eye/config/color_config.dart';
import 'package:cat_eye/config/string_config.dart';
import 'package:cat_eye/root_page/my_attention_page/my_attention_video_widget.dart';
import 'package:cat_eye/util/util.dart';
import 'package:cat_eye/view_model/my_attention_view_model.dart';
import 'package:flutter/material.dart';

/*
* @Package: root_page.my_attention_page
* @ClassName: MyAttentionWidget
* @Author: szj
* @CreateDate: 8/3/21 2:39 PM
*
* TODO 我的关注页面
*/
class MyAttentionWidget extends StatefulWidget {
  const MyAttentionWidget({Key key}) : super(key: key);

  @override
  _MyAttentionWidgetState createState() => _MyAttentionWidgetState();
}

class _MyAttentionWidgetState
    extends BaseRefreshState<MyAttentionWidget, MyAttentionViewModel> {
  @override
  MyAttentionViewModel get buildViewModel => MyAttentionViewModel();

  @override
  Widget buildWidget(BuildContext context, MyAttentionViewModel model) {
    return Scaffold(
      appBar: appBar(
        StringConfig.MY_ATTENTION,
        backgroundColor: ColorConfig.themeColor
      ),
      body: Container(
        child: ListView.builder(
            itemCount: model.list.length,
            itemBuilder: (context, index) {
              return Column(
                children: [
                  //顶部Image
                  _bodyImageUrl(model.list[index]),
                  //底部布局

                  Row(
                    children: [
                      //左侧作者图片
                      _leftImage(model.list[index].authorImageUrl),
                      //中间文字
                      _videoDescription(
                          model.list[index].title, model.list[index].time),
                      //右侧分享
                      _shareButton(model, index),
                    ],
                  )
                ],
              );
            }),
      ),
    );
  }

  /// 分享按钮
  Widget _shareButton(MyAttentionViewModel model, int index) {
    return IconButton(
      icon: Icon(Icons.delete, color: Colors.black38),
      onPressed: () {
        model.delete(index, model.list[index].bodyImageUrl);
      },
    );
  }

  /// 视频内容简介
  Widget _videoDescription(String title, String time) {
    // Expanded:相当于Android中设置 weight 权重
    return Expanded(
      flex: 1,
      child: Container(
        padding: EdgeInsets.only(left: 10),
        // 垂直的LinearLayout
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            AnimatedOpacity(
              opacity: title == "" ? 0 : 1,
              duration: Duration.zero,
              child: Text(title,
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 14,
                      fontWeight: FontWeight.bold),
                  // 过长则省略
                  overflow: TextOverflow.ellipsis),
            ),
            Padding(
                padding: EdgeInsets.only(top: 2),
                child: AnimatedOpacity(
                  opacity: title == "" ? 0 : 1,
                  duration: Duration.zero,
                  child: Text(time,
                      style: TextStyle(color: Color(0xff9a9a9a), fontSize: 12)),
                ))
          ],
        ),
      ),
    );
  }

  Widget _leftImage(String authorImageUrl) {
    return Padding(
      padding: EdgeInsets.only(left: 10, top: 5),
      child: AnimatedOpacity(
        opacity: authorImageUrl == "" ? 0 : 1,
        duration: Duration.zero,
        child: ClipRRect(
            borderRadius: BorderRadius.circular(22),
            child: cacheImage(
              authorImageUrl,
              width: 40,
              height: 40,
            )),
      ),
    );
  }

  Widget _bodyImageUrl(SqLiteBean sqLiteBean) {
    return InkWell(
      onTap: () {
        Navigator.push(
            context,
            router(
                //跳转到我的关注页面
                widget: MyAttentionVideoWidget(
              videoUrl: sqLiteBean.videoUrl,
              background: sqLiteBean.background,
            )));
      },
      child: Container(
        height: 180,
        alignment: Alignment.center,
        padding: EdgeInsets.only(top: 10, left: 10, right: 10),
        width: MediaQuery.of(context).size.width + 10,
        child: Stack(
          children: [
            Container(
              // decoration:装饰,设置子控件的背景颜色、形状等
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12),
                image: DecorationImage(
                  // 网络获取图片 只有这样才能设置圆角
                  image: cachedNetworkImageProvider(sqLiteBean.bodyImageUrl),
                  // 图片显示样式,类似Android缩放设置
                  fit: BoxFit.cover,
                ),
              ),

              //这样不能设置圆角
              // child: cacheImage(bannerList[index].data.cover.feed,fit: BoxFit.cover),
            ),

            //左上角文字
            leftTopText(sqLiteBean.type),

            //右下角时间
            leftBottomTime(sqLiteBean.videoTime),
          ],
        ),
      ),
    );
  }

  Widget leftBottomTime(String time) {
    return Positioned(
        right: 10,
        bottom: 10,
        child: AnimatedOpacity(
          opacity: time == "" ? 0 : 1,
          duration: Duration.zero,
          child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.black54),
            width: 50,
            height: 30,
            alignment: Alignment.center,
            child: Text(
              time,
              style: TextStyle(color: Colors.white),
            ),
          ),
        ));
  }

  Widget leftTopText(String title) {
    return Positioned(
      left: 10,
      top: 10,
      //是否显示
      child: AnimatedOpacity(
        opacity: title == "" ? 0 : 1,
        duration: Duration.zero,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white54,
            borderRadius: BorderRadius.all(Radius.circular(22)),
          ),
          width: 44,
          height: 44,
          alignment: Alignment.center,
          child: Text(title ?? StringConfig.OTHER),
        ),
      ),
    );
  }
}
